<template>
    <div class="row">
        <nav class="col-md-12" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="/" @click.prevent="pathTo('/')">首页</a>
                </li>
                <li v-for="(item, index) in paths" :key="index" class="breadcrumb-item">
                    <!-- <a v-if="index === paths.length - 1" >{{item}}</a> -->
                    <a :href="'/' + paths.slice(0, index + 1).join('/')" @click.prevent="pathTo('/' + paths.slice(0, index + 1).join('/'))">{{item}}</a>
                </li>
                <slot></slot>
            </ol>
        </nav>
    </div>
</template>

<script>
export default {
    data() {
            return {

            }
        },
    props: ['path'],
    emits: ['pathTo'],
    methods: {
        pathTo(path) {
            this.$emit('pathTo', path)
        },
    },
    watch: {
    },
    computed: {
        paths() {
            return this.path && this.path !== '/' ? this.path.slice(1).split('/') : []
        }
    },
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
